import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Text} from '@tarojs/components'
import './check-ticket.scss'
import {AtIcon} from 'taro-ui'
import {
  NEW_GET_ORDER_DETAIL, TARO_ENV
} from '../../constants/api'
import {OrderDetail} from '../../utils/server.interface'
import {newHttp} from "../../utils/request";
import {GetRequest, vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"

export default class CheckTicket extends Component {
  type = 0; // 0 手动录入手机号或核验码    1 扫码进入的核验码
  state: {
    orderInfo: OrderDetail | false
  } = {
    orderInfo: false,

  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    if (process.env.TARO_ENV === "weapp") {
      Taro.hideShareMenu()
    }
  }

  async componentDidShow() {
    vcmonitor(this)
    const orderId = Taro.getCurrentInstance().router.params.id
    const orderInfo = await newHttp.catchGet<OrderDetail>(NEW_GET_ORDER_DETAIL, {orderId})
    this.setState({orderInfo})
  }

  showImg(current) {
    Taro.previewImage({
      current,
      urls: [current]
    })
  }

  render() {
    const {orderInfo} = this.state
    return (
      <View className='check-ticket-root'>
        <GzhAuth />
        {orderInfo && <View className='orderInfo'>
          <View className='order-no'>
            订单号：{orderInfo.order_num}
          </View>
          <View className='order-name'>{orderInfo.alias ? orderInfo.alias :orderInfo.name}</View>
          {orderInfo.meals && orderInfo.meals.length > 0 && orderInfo.meals.map((item, index) =>
            <View className='order-name-child' key={index}>
              <Text className='order-left'>{item.product_name}</Text>
              <Text className='order-right'>{item.buy_amount}张</Text>
            </View>
          )}
          {orderInfo.nick_name && <View className='order-item' style='margin-top: 10rpx;'>
            <Text className='order-left'>购买人:</Text>
            <Text className='order-right'>{orderInfo.nick_name}</Text>
          </View>}
          {orderInfo.buy_date && <View className='order-item'>
            <Text className='order-left'>可用日期:</Text>
            <Text className='order-right'>{orderInfo.buy_date}</Text>
          </View>}
          {orderInfo.validTimeMsg && orderInfo.goodsType != 'product' && <View className='order-item'>
            <Text className='order-left'>可用时间:</Text>
            <Text className='order-right'>{orderInfo.validTimeMsg}</Text>
          </View>}
          {orderInfo.pay_type != 4 && <View className='order-item'>
            <Text className='order-left'>商品单价:</Text>
            <Text className='order-right'>￥{orderInfo.unit_fee}</Text>
          </View>}
          {orderInfo.linkman && <View className='order-item'>
            <Text className='order-left'>接收人姓名:</Text>
            <Text className='order-right'>{orderInfo.linkman.split("/")[0]}</Text>
          </View>}
          {orderInfo.phone && <View className='order-item'>
            <Text className='order-left'>接收人手机:</Text>
            <Text className='order-right'>{orderInfo.phone}</Text>
          </View>}
          {orderInfo.identity_num && <View className='order-item'>
            <Text className='order-left'>接收人身份证:</Text>
            <Text className='order-right'>{orderInfo.identity_num}</Text>
          </View>}
          {orderInfo.face_photo &&
          <View className='order-item' onClick={this.showImg.bind(this, orderInfo.face_photo)}><Text>接收人人脸</Text><AtIcon
            value='chevron-right' size='15' color='#ccc'
          /></View>}
          {orderInfo.address && <View className='order-item'>
            <Text className='order-left'>收货地址:</Text>
            <Text className='order-right'>{orderInfo.address}</Text>
          </View>}
          {orderInfo.defined_img &&
          <View className='order-item' onClick={this.showImg.bind(this, orderInfo.defined_img)}><Text>图片</Text><AtIcon
            value='chevron-right' size='15' color='#ccc'
          /></View>}
          {orderInfo.pay_type != 4 && <View className='order-item'>
            <Text className='order-left'>订单金额:</Text>
            <Text className='order-right'>￥{orderInfo.total_fee}</Text>
          </View>}
          {orderInfo.pay_type != 4 && <View className='order-item'>
            <Text className='order-left'>支付方式:</Text>
            <Text className='order-right'>{orderInfo.useAccountPay_name}</Text>
          </View>}
          {orderInfo.offpay_date && <View className='order-item'>
            <Text className='order-left'>支付时间:</Text>
            <Text className='order-right'>{orderInfo.offpay_date}</Text>
          </View>}
          {orderInfo.remark && <View className='order-item'>
            <Text className='order-left'>备注:</Text>
            <Text className='order-right'>{orderInfo.remark}</Text>
          </View>}
        </View>}
      </View>
    )
  }
}
